<template>
  <div class="city" id="map_container"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import {darkStyle} from "./common"

import gcoord from "gcoord";

onMounted(drawMap);

let map: any = null;
let view: any = null;
function drawMap() {
  map = new BMapGL.Map("map_container",{
    // style: {styleJson: darkStyle}
  });
  map.enableScrollWheelZoom();
  map.centerAndZoom(new BMapGL.Point(121.480519, 31.220787), 16);
  // map.addEventListener("tilesloaded", function () {
  // console.log("地图加载完成！");
  map.setTilt(71);
  map.setHeading(-45.3);

  start();
  // trackAniStart();
  // drawTxt();
  drawCycle();
  // });
}

async function start() {
  var bloomEffect = new mapvgl.BloomEffect({
    threshold: 0,
    blurSize: 0
});
  view = new mapvgl.View({
    // effects: [bloomEffect],
    // effects: [new mapvgl.BloomEffect(), new mapvgl.BlurEffect(), new mapvgl.DepthEffect()],
    map: map,
  });

  const res1 = await fetch(window.base+"/json/1.json");
  const res = await res1.json();

  //  * 坐标常量说明：
  //  * COORDINATES_WGS84 = 1, WGS84坐标
  //  * COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
  //  * COORDINATES_GCJ02 = 3，GCJ02坐标
  //  * COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
  //  * COORDINATES_BD09 = 5, 百度bd09经纬度坐标
  //  * COORDINATES_BD09_MC = 6，百度bd09墨卡托坐标
  var shaperLayer = new mapvgl.ShapeLayer({
    texture: window.base+"/images/wall2.png",
    isTextureFull: true,
    textureScale: 0.05,
    topColor: "rgba(39, 50, 85, 1.0)",
    opacity: 1.0,
  });
  const polygons1 = [];
  for (let i = 0; i < res.features.length; i++) {
    const item = res.features[i];
    item.properties.height = item.properties.h;

    if (item.geometry.coordinates?.[0]?.length) {
      const pointer = await translate2(item.geometry.coordinates[0]);

      item.geometry.coordinates[0] = pointer;
    }
    polygons1.push(item);
  }

  view.addLayer(shaperLayer);
  shaperLayer.setData(polygons1);
}

function trackAniStart() {
  var path = [
    {
      lng: 121.514046,
      lat: 31.226113,
    },
    {
      lng: 121.507722,
      lat: 31.234512,
    },
    {
      lng: 121.499098,
      lat: 31.244021,
    },
    {
      lng: 121.503123,
      lat: 31.248899,
    },
    {
      lng: 121.531222,
      lat: 31.252974,
    },
  ];
  var point = [];
  for (var i = 0; i < path.length; i++) {
    point.push(new BMapGL.Point(path[i].lng, path[i].lat));
  }

  let polyline = new BMapGL.Polyline(point, {
    strokeColor: "blue",
    strokeWeight: 2,
    strokeOpacity: 0,
  });
  map.addOverlay(polyline);
  var pl = new BMapGL.Polyline(point);
  var trackAni = new BMapGLLib.TrackAnimation(map, polyline, {
    overallView: true, // 动画完成后自动调整视野到总览
    tilt: 30, // 轨迹播放的角度，默认为55
    duration: 20000, // 动画持续时长，默认为10000，单位ms
    delay: 3000, // 动画开始的延迟，默认0，单位ms
  });

  trackAni.start();
}

function drawTxt() {
  var textLayer = new mapvgl.TextLayer({
    color: "#000",
    fontFamily: "Microsoft Yahei",
    fontSize: 14,
    flat: false,
    collides: true,
    offset: [0, 0],
    padding: [2, 2],
    margin: [0, 0],
    data: [
      {
        geometry: {
          type: "Point",
          coordinates: [121.506297, 31.245602],
        },
        properties: {
          text: "东方明珠塔", // 展示的文字
        },
      },
    ],
  });
  view.addLayer(textLayer);
}

function drawCycle() {
  var layer = new mapvgl.FanLayer({
    color: '#009900',
    data: [
      {
        geometry: {
          type: "Point",
          coordinates: [121.506297, 31.245602],
        },
        properties: {
          count: 10,
        },
      },
    ],
    size: function (data) {
      return data.properties.count * 200;
    },
  });
  view.addLayer(layer);
}

function translate2(lng) {
  //   console.log(lng);
  let list = [];
  lng?.forEach((item) => {
    // WGS84坐标系
    const wgs84 = "EPSG:4326";
    // BD-09坐标系
    const bd09 = "EPSG:3807";

    // WGS84坐标点（经度、纬度）
    const wgsPoint = [item[0], item[1]];
    list.push(
      gcoord.transform(
        wgsPoint, // 经纬度坐标
        gcoord.GCJ02, // 当前坐标系
        gcoord.BD09 // 目标坐标系
      )
    );
  });
  return new Promise((resolve) => {
    resolve(list);
  });
}
</script>

<style lang="scss" scoped>
.city {
  height: 100%;
}
</style>
